/* CSS Document */
body {width:500px; height:100px; border:black thin solid;}

@-webkit-keyframes intro{
	0%{
		opacity: 0;
		left:-200px;
	}

	100%{
		opacity: 1;
		left:200px;
	}	
}
@-webkit-keyframes hold{
	0%{
		left:200px;
		opacity: 1;
	}
	100%{
		opacity: 1;
		left:200px;
	}	
}

@-webkit-keyframes outro{
	0%{
		-webkit-transform:scale(1,1);
		opacity: 1;
	}
	100%{
		-webkit-transform:scale(4,4) rotate(180deg);
		opacity: 0;
	}	
}

/* F I R E F O X */
@-moz-keyframes intro{
	0%{
		opacity: 0;
		left:-200px;
	}

	100%{
		opacity: 1;
		left:200px;
	}	
}
@-moz-keyframes hold{
	0%{
		left:200px;
		opacity: 1;
	}
	100%{
		opacity: 1;
		left:200px;
	}	
}

@-moz-keyframes outro{
	0%{
		-moz-transform:scale(1,1);
		opacity: 1;
	}
	100%{
		-moz-transform:scale(4,4) rotate(180deg);
		opacity: 0;
	}	
}

h1{
	position: absolute;
	opacity: 0;
			left:200px;
	-webkit-animation: intro 3s ease-in-out 0s 1,
					hold 1s none 3s 1,
					outro 1s ease-in-out 4s 1;
	-moz-animation: intro 3s ease-in-out 0s 1,
					hold 1s none 3s 1,
					outro 1s ease-in-out 4s 1;
}	
img{
	position: absolute;
	opacity: 0;
	left:200px;
	-webkit-animation: intro 3s ease-in-out 2s 1,
					hold 1s none 5s 1,
					outro 1s ease-in-out 6s 1;
	-moz-animation: intro 3s ease-in-out 2s 1,
					hold 1s none 5s 1,
					outro 1s ease-in-out 6s 1;
}		

